<meta charset="UTF-8">
  <div class="content-wrapper">
    <section class="content-header">
      <h1 style="text-align:center">
        	生产新增
      </h1>
    </section>
    <section class="content" style='position: relative;'> 
         <div class="panel-body" style="padding-bottom:0px;">
						<div class="row searchdiv">
							<div class="form-group col-lg-2 col-xs-6 space" style='display: inline-block;width: auto;vertical-align: middle;'>
								<div ng-show='lock' style='width: calc(100% - 4px);height: 34px;position: absolute;background-color: #ddd;opacity: 0.4;z-index: 1000;'></div>
									 <select style='width: 110px;' class="form-control" ng-model="periodId" ng-options='period.period_time_id as period.period_time_name for period in periods'>
			            </select>
								</div>
							<div class="form-group col-lg-2 col-xs-6 space" style='width: 130px;padding-left: 0px;'>
								<div ng-show='lock' style='width: calc(100% - 2px);height: 34px;position: absolute;background-color: #ddd;opacity: 0.4;z-index: 1000;'></div>
								<div class="input-group date">
								  <input type="text" class="form-control pull-right" id="datepicker" placeholder="计划日期">
								</div>
							</div>
							<button class='bnn' ng-click='getPeriodDatas($event)' ng-hide='lock'>确定</button>
							<button class='bnn' style='background-color: #ddd;' ng-click='unlock($event)' ng-show='lock'>解除锁定</button>
							<!--<div class="form-group col-lg-2 col-xs-6 space" style='width: 130px;'>
                    <button type="submit" class="btn btn-default" style='padding: 6px 12px;' ng-click='search()'>
                    	<i class="fa fa-search"> 查询</i>
                    </button>
                </div>-->
			     			 <!--<button style='margin-right: 3%;' class="btn pull-right" ng-click="download('operationTableExport','生产计划')"><i class="fa fa-cloud-download"></i>&nbsp;&nbsp;导出</button>-->
			     			 <div class='butt' ng-click="jump_back()">返回</div> 
      				   <div class='butt' ng-click='dishInforSave()'>提交</div> 
			     			 <!--<button style='margin: 0px 1%;padding: 10px 6px;background-color: #3c8dbc;font-size: 14px;width: 20%;max-width: 50px;' class="btn pull-right" ng-click='addCategory()'>返回</button>
			   				 <button style='margin: 0px 1%;padding: 10px 6px;background-color: #3c8dbc;font-size: 14px;width: 20%;max-width: 50px;' class="btn pull-right" ng-click='addCategory()'>新增</button>-->
						</div>
			   
			<!--表格-->
			<div class="box" >
            <div class="box-body">
            		
            		<div  class="dataTables_wrapper form-inline dt-bootstrap">
            			<div  class='div_mark' style=''>
            					<input placeholder="生产计划备注" ng-model='remark' type="text" style='width: 98%;height: 34px;margin: 3px 1% ;border: none;outline: none;padding-left: 10px;'/>
            			</div>
	            			<div class="col-sm-12">
			              	<table id='cardManageTable' style='width: 100%; position: relative;overflow: auto; display: block;background: #ffffff;height:440px' 
			              		class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info"><!--min-height: 300px; max-height: 500px;-->
			                <thead style='display: inline-table;width: 100%;'>
				                <tr role="row">
				                	<th  style="width: 15%;">菜品名称</th>
				                	<th  style="width: 15%;" >单位</th>
				                	<th  style="width: 15%;">计划数量</th>
				                	<th  style="width: 15%;">制作档口</th>
				                	<th  style="width: 15%;">出品时间</th>
				                	<th  style="width: 10%;" >操作</th>
				                </tr>
			                </thead>
			              <tbody id='dataList' style='display: inline-table;width: 100%;' >
					                <tr ng-click="itemSelected($event,card.cardKindId)" style='position: relative;width: 100%;display: inline-table;' ng-class="{even:!$even, odd:!$odd}"  on-finish-render-filtersone ng-repeat="item in datas.items">
						                  <td style="width: 15%;">{{item.name}}</td>
						                  <td style="width: 15%;" >{{item.unit}}</td>
						                  <td style="width: 15%;">
						                  	<input class='td_input'  type="number" ng-model="item.count"/>
						                  </td>
						                  <td style="width: 15%;">{{item.windowName}}</td>
						                  <td style="width: 15%;">
						                  	<!--<input style='width: 100px;' type="text" value="{{datas.start_time}}"/>-->
														            <div class="bootstrap-timepicker">
																	<div class="bootstrap-timepicker-widget dropdown-menu">
																		<table><tbody><tr><td><a href="#" data-action="incrementHour"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td><a href="#" data-action="incrementMinute"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td class="meridian-column"><a href="#" data-action="toggleMeridian"><i class="glyphicon glyphicon-chevron-up"></i></a></td></tr><tr><td><span class="bootstrap-timepicker-hour">03</span></td> <td class="separator">:</td><td><span class="bootstrap-timepicker-minute">15</span></td> <td class="separator">&nbsp;</td><td><span class="bootstrap-timepicker-meridian">PM</span></td></tr><tr><td><a href="#" data-action="decrementHour"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator"></td><td><a href="#" data-action="decrementMinute"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator">&nbsp;</td><td><a href="#" data-action="toggleMeridian"><i class="glyphicon glyphicon-chevron-down"></i></a></td></tr></tbody></table></div>
														                <div class="form-group">
														                  <div class="input-group" >
														                    <input  on-finish-render-filtersone style='height:24px;width: 80px;border: 1px solid #37C8D2;border-radius: 3px;' type="text" class="form-control timepicker col-sm-4" ng-model="item.production_time" ng-init='item.production_time = datas.start_time'  ng-required='true'> 
														                 </div>
														                </div>
														              </div>
						                  </td> 
										  				<td style="width: 10%;" >
										  						<img style='width:30px;cursor: pointer;' src="../imgs/prodel.png" ng-click='addDel(item.id)'/>
										  				</td>
					                </tr>
					                <tr ng-click="itemSelected($event,card.cardKindId)" style='position: relative;width: 100%;display: inline-table;' ng-class="{even:!$even, odd:!$odd}"  >
						                  <td style="width: 15%;">
						                  	<input readonly=""  class='td_input'  type="text" value=""/>
						                  </td>
						                  <td style="width: 15%;" >
						                  	<input readonly=""  class='td_input'  type="text" value=""/>
						                  </td> 
						                  <td style="width: 15%;">
						                  	<input readonly=""  class='td_input'  type="text" value=""/>
						                  </td>
						                  <td style="width: 15%;">
						                  	<input readonly=""  class='td_input'  type="text" value=""/>
						                  </td> 
						                  <td style="width: 15%;">
						                  	<input readonly=""  class='td_input'  type="text" value=""/>
									               </div>
						                  </td> 
										  				<td style="width: 10%;" >
										  						<img style='width:30px;cursor: pointer;' src="../imgs/proadd.png" ng-click='addPro()'/>
										  				</td>
					                </tr>
			                </tbody>
			                <tfoot> 
			                </tfoot>
			              </table> 
	              	</div> 
              </div>
            		
           </div> 
      </div>
      
	</section>
</div>

<!-- 模态框 选择菜品 -->
<div class="modal fade" id="choiceDishes" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document" style='width: 70%;'>
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center">菜品选择</h4>
      </div>
      <from>
      <div class="modal-body form-horizontal"> 
				      		<div class="box" style='width: 96%;height: 400px;margin: 0px 2%;display: inline-block;display: flex;font-size: 16px;'>
								<div style='width: 15%; border: 1px solid #d2d6de;height: 100%;'>
									<div style='width: 100%;height: 40px;border-bottom: 1px solid #d2d6de;line-height: 40px;text-indent: 20px;'>全部类别</div>
									<div style='width: 100%;height: calc(100% - 40px);overflow: auto;'>
										<div ng-click='getDishesByCategory(c.id)' style='width: 100%;height: 40px;border-bottom: 1px solid #d2d6de;line-height: 40px;text-indent: 20px;cursor: pointer;' ng-repeat='c in categorys'>{{c.name}}</div><!--ng-repeat="m in materialCategorys | unique: 'category_id' "-->
									</div>
								</div>
								<div style='width: 15%; border: 1px solid #d2d6de;height: 100%;'>
									<div style='width: 100%;height: 40px;border-bottom: 1px solid #d2d6de;'>
										<input type="text" ng-model='cardInfor' class='goods' placeholder="菜品查询"/>
									</div>
									<div style='width: 100%;height: calc(100% - 40px);overflow: auto;'>
										<div  ng-click='cmaterial($event,m.id,m.name,m.unit_name,m.window_name)' style='width: 100%;height: 40px;border-bottom: 1px solid #d2d6de;
											line-height: 40px;padding-left: 10%;cursor: pointer;' ng-repeat="m in dishesByOneCategory">
											<p style="display: inline-block;overflow: hidden;width: 70%;text-overflow: ellipsis;white-space: nowrap;">{{m.name}}</p>
											<span style="width: 20%;height: 100%;float: right;">
												<img src='../imgs/right.png' style='width: 20px;'/>
											</span>
										</div>
									</div>
								</div>
								<div style='width: 70%; border: 1px solid #d2d6de;height: 100%;'>
									<div style='width: 100%;height: 40px;border-bottom: 1px solid #d2d6de;'>
										<div class='b_header' >菜品名称</div>
										<div class='b_header' >单位</div>
										<div class='b_header' >数量</div>
										<div class='b_header' >操作</div>
									</div>
									<div id='maDataList' style='width: 100%;height: calc(100% - 40px);overflow: auto;'>
										<div class='maDataList_div' style='width: 100%;height: 40px;border-bottom: 1px solid #d2d6de;' ng-repeat='m in maDatas' >
											<div class='b_header maDataList_name' >{{m.name}}</div>
											<div class='b_header' >{{m.unit}}</div>
											<div class='b_header' >
												<input type='number' ng-model='m.count' style='height: 28px; width: 90%;margin-left: 20px;text-indent: 20px;'/>
											</div>
											<div class='b_header' ><img ng-click='delThis($event,m.name)' src='../imgs/del.png' style='width: 15px;cursor: pointer;margin-left: 10px;'/></div>
										</div>
									</div>
								</div>
								
					      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg pull-left" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-success btn-lg" ng-click="addDish_true();">确定</button>
      </div>
      </from>
    </div>
  </div>
</div> 

<style>
	.space{
		padding-left:2px;
		padding-right:2px;
	}
	.box{
		border-top:1px solid #d2d6de;
	}
	.pagination{
		margin:0;
	}
	.odd{background-color: #f9f9f9 !important;}
	.even{background-color: transparent !important;}
	.btn{    padding: 10px 12px;}
	.flow td{overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
	.fun:hover{cursor: pointer;color: #00E765;}
	.bnn{color: #37C8D2;background-color: #FFFFFF;border: 1px solid #37C8D2;margin-left: 10px;display: inline-block;border-radius: 4px;white-space: nowrap;padding-left: 10px;padding-right: 10px;height: 34px;}
	.butt{float: right;width: 60px;color: #FFFFFF;background-color: #37C8D2;border: 1px solid #37C8D2;cursor: pointer;
    border-radius: 4px;white-space: nowrap;text-align:center;height: 34px;line-height: 34px;margin: -5px 35px 5px 5px;}
	/*.flow td:hover{text-overflow:inherit;overflow:visible;z-index: 1000;background-color: rgba(255,255,255,0.9);}*/
	.div_mark{width: 100%;height: 40px;border: 1px solid #ccc;border-radius: 5px;margin: 0px 0px 10px 0px;}
	.div_mark:hover{border: 1px solid #37C8D2;}
	.td_input{border: 1px solid #37C8D2;border-radius: 3px;width: 80px;}
	.goods{    height: 30px;margin: 6px 10%;line-height: 20px;padding: 5px;width: 80%;border: 1px solid #ccc;border-radius: 3px;}
	.primary-color { color: #37C8D2;}
	.b_header{width: 24%;height: 20px;line-height: 40px;text-align: center;display: inline-block;}
	.maDataList_div_input{height: 28px; width: 90%;  margin-left: 20px;}
</style>
 <script>
	
</script>